<template>
  <div id="login">
    <!-- 头部 -->
    <div class="header">
      <div class="header-con">
        <div class="header-logo" @click="toHome">
          <div class="header-logo-con">
             <img src="../img/logo.png" alt>
          </div>
        </div>
      </div>
    </div>
    <!-- 主体部分 -->
    <div class="main">
      <div class="main-img">
        <img src="../img/登录页背景.png" alt>
      </div>

      <!-- 表单内容 -->
      <div class="from-con">
        <!-- 表单标题 -->
        <div class="from-title">
          <div class="from-title-text1">
            <p>好多单</p>
          </div>
          <div class="from-title-text2">-精选更多优质好单-</div>
        </div>
        <div class="from">
          <!-- 登录表单-------------------------------------------------------- -->
          <div class="right_text">
            <h3>
              欢迎登录
              <a href="#">
                还没有账号？
                <span @click="toRegister">免费注册</span>
              </a>
            </h3>

            <form action="" method="get">
              <div class="form-input">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                  <el-form-item label="" prop="phoneNum">
                    <el-input v-model.number="ruleForm.phoneNum" placeholder="手机号/邮箱/用户名"></el-input>
                  </el-form-item>
                  <el-form-item label="" prop="pass">
                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                  </el-form-item>
                  <check  v-if="hackReset" v-bind:message="parentMsg" v-on:listenToChildEvent="showMsgFromChild"></check>
                  <el-form-item>
                    <!-- <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> -->
                     <p style="text-align:right;margin-top:10px;">
                        <a @click="toFind">忘记密码?</a>
                      </p>
                  </el-form-item>

                  <el-form-item>
                    <el-button style="
                      width: 100%;
                      background:linear-gradient(90deg,rgba(217,46,30,1),rgba(255,86,43,1));
                      height: 45px;
                      color: #FFFFFF;
                      border: 0;
                      text-align: center !important;
                    " type="primary" @click="submitForm('ruleForm')">登录</el-button>
                  </el-form-item>
                </el-form>
               <!--  <p>
                  <input style="user-select:none !important;" type="primary" @click="submitForm('ruleForm')" class="button" value="登录">
                </p> -->
                <div class="errText">
                  <p v-show="false">密码或用户名错误</p>
                  <p v-show="this.errData.errYzm">先通过验证才可以登录</p>
                </div>
              </div>
            </form>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../scss/login.scss";
import "../scss/drag.scss";
import '../scss/home.scss';
import check from "../components/check.vue";
import ApiStorage  from "../utils/ApiStorage.js";
import ApiCookie from '../utils/ApiCookie.js';
import ApiCheck from "../utils/ApiCheck.js";

export default {
  components: {
    check,
  },
  created() {
    // 刷新滑动验证条的初始状态
    this.hackReset = true;
  },
  data() {
     var checkPhone= (rule,value,callback) => {
      if (!value) {
          return callback(new Error('输入正确账号格式'));
      }
      callback();
    };
    // 检查年龄方法
    var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      // 检查密码
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      // 检查再次输入密码
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      // 验证码
      var checkyzm = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('验证码不能为空'));
        }
        callback();
      };
    return {
      ruleForm: {
          pass: '',
          phoneNum:'',
        },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        phoneNum:[
          {validator: checkPhone, trigger:'blur'}
        ],
      },
      // 用户token
      token:'',
      // 验证码值
      confirmSuccess: false,
      // 验证按钮是否可选中
      setdisabled: false,
      // 显示时间
      time: 60,
      // 验证码数据
      parentMsg:0,
      // 判断是否已经登录值
      code:false,
      // 验证码错误提示
      errBottom:false,
      // 错误提示
      errData:{
        errPhone:false, //手机号码格式错误
        errPwd1:false,  //密码错误
        errPwd2:false,  //重置密码错误
        errYzm:false,   //手动验证不通过
      },
      // 滑动验证码判断值
      hackReset:true,

      // element ui
    };
  },
  methods: {
    // 登录部分
    submitForm(formName) {
      console.log('输出信息：',this.ruleForm.phoneNum)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            this.goLogin();
          } else {
            this.$notify.error({
              title: '登录失败',
              message: '请重新登录'
            });
            return false;
          }
        });
      },
      
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    
    // 检测rules变化
    getRules(){
      console.log('rules数据',this.rulesList);
      // 重置输入框
    },
    // 刷新滑动验证条
    changeData(){
      this.hackReset = false
      this.$nextTick(() => {
        this.hackReset = true
      })
    },
    // 存储token
    setToken(){
      console.log('存储数据',this.token);
      ApiCookie.setCookie("data",this.token,1);
    },
    
    // 登录账号
    goLogin(){
      // 先通过验证才可以登录
      // this.confirmSuccess
      if(this.confirmSuccess){
        console.log('登录成功');
          this.axios.post("/getyzm/login/index",{
                dd_phone:this.ruleForm.phoneNum,
                dd_password:this.ruleForm.pass,
            }).then(res => {
            if(res.data.code == -1){
              console.log(res.data.msg);
                  // 失败提示
                  this.$notify.error({
                    title: '登录失败',
                    message: '用户名或密码错误'
                  });
            }else{
                this.token=res.data.access_token;
                console.log('token:',res)
                // 保存token
                this.setToken();

                if(this.token){
                  // 成功提示
                  this.$notify({
                    title: '登录成功',
                    // message: '这是一条成功的提示消息',
                    type: 'success'
                  })
                  //跳转到首页
                  this.toHome();
                }
            }
            
        });
      }else{
        // 错误提示显示
        this.errData.errYzm = true;
      }
      
    },
    //获取验证码判断值
    showMsgFromChild(data) {
      this.confirmSuccess = data;
      this.errData.errYzm = false;
      console.log(this.confirmSuccess);
    },
    //跳转到找回密码页面
    toFind() {
      this.$router.push({ name: "find" });
    },
    //跳转到首页
    toHome() {
      this.$router.push({ name: "product" });
    },
    // 跳转到注册页
    toRegister(){
      this.$router.push({ name: "register" });
    }
  },
  // 侦听器
  watch: {
    hackReset :function(newValue,oldValue){
      // this.changeData();
    },
  }
};
</script>



